# Vue 2

In this document, you will learn how to build a Vue 2 application using Rsbuild.

## Create Vue 2 Project

You can use `create-rsbuild` to create a project with Rsbuild + Vue 2. Just execute the following command:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm create rsbuild@latest',
    yarn: 'yarn create rsbuild',
    pnpm: 'pnpm create rsbuild@latest',
    bun: 'bun create rsbuild@latest',
  }}
/>

Then select `Vue 2` when prompted to "Select framework".

## Use Vue2 in an existing project

To compile Vue SFC (Single File Components), you need to register the Rsbuild [Vue 2 plugin](/plugins/list/plugin-vue2). The plugin will automatically add the necessary configuration for Vue builds.

For example, register in `rsbuild.config.ts`:

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginVue2 } from '@rsbuild/plugin-vue2';

export default defineConfig({
  plugins: [pluginVue2()],
});
```

:::tip

- The Vue 2 plugin only supports Vue >= 2.7.0.
- For projects using Vue CLI, you can refer to the [Vue CLI Migration Guide](/guide/migration/vue-cli).

:::

## Use the JSX syntax of Vue

If you need to use the JSX syntax of Vue, you also need to register the [Vue 2 JSX plugin](/plugins/list/plugin-vue2-jsx).

## Type Declarations

In a TypeScript project, you need to add type definitions for `*.vue` files so that TypeScript can recognize them correctly.

Create `env.d.ts` in the `src` directory and add the following content:

```ts title="src/env.d.ts"
declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}
```
